<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="../../css/laydate.css" rel="stylesheet"/>
<link href="../../css/lay.css" rel="stylesheet"/>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
	<script src="${pageContext.request.contextPath}/js/laydate.js"></script>
</head>
<body>
<div id="addDiv" align="center"><!-- 新增DIV -->
		
		<form name="addf" action="" method="post" enctype="multipart/form-data" target="hideframe">
		<!-- 需要进行表单封装 -->
		<table>
		    <tr><td align="right">用户名:</td> 
		        <td align="left"><input type="text" name="userAccount"></td>
		    </tr>
		 <tr><td align="right">性   别:</td><td align="left"><input type="radio"  checked="checked" name="userSex" value="1">男
		              <input type="radio"   name="userSex" value="0">女</td></tr>
		
	       <tr><td align="right">邮   箱:</td>
	          <td align="left"><input type="text" name="userEmail"></td>
	       </tr>
		   <tr><td align="right">年   龄:</td>
		       <td align="left"><input type="text" name="userAge"></td>
		   </tr>
		   <tr><td align="right">密   码:</td>
		       <td align="left"><input type="password" name="userPass"></td>
		   </tr>
		    <tr><td align="right"> 出生日期:</td>
		        <td><input type="text" name="userBirthday"  id="demo"></td>
		    </tr>
		<tr><td colspan="2" align="center"><input type="button" onclick = "addUser()" value="新增"></td></tr>
	</table>
	</form>
	</div>
	<div id="showAllMessage">
	</div>
	<iframe name="hideframe" style="display:none"></iframe> <!-- 此iframe不显示 -->
</body>
<script type="text/javascript">
function add(){//点击新增按钮
	$("#pageDiv").hide();//将查询的DIV进行关闭
	//window.open("${pageContext.request.contextPath}/jsp/userManage/add.jsp");
	 $("#addDiv").fadeIn();//显示新增DIV
}
function addUser(){//进行新增操作（需要上传图片，我们要确保上传图片的提交不能够进行跳转，所以在表单中没有设置提交按钮）
	
	var userAccount = addf.userAccount.value;//取得userName控件的值
	var userSex = addf.userSex.value;
	var userEmail = addf.userEmail.value;
	var userAge = addf.userAge.value;
	var userPass  = addf.userPass.value;//取得密码
	var userBirthday = addf.userBirthday.value;	
	addf.submit();//表单提交，表单提交的时候，跳转的目标是隐藏iframe，那么页面就没有跳转的效果，但是提交之后文件是已经上传了的。
	alert(userSex);
	$.ajax({//进行提交
		type : "post",//提交方式
		url : "${pageContext.request.contextPath}/servlet/addUser",//提交路径
		async : true,//是否异步
		dataType : 'json',//数据格式（不进行跨越json，跨域使用jsonp），
		data : { //参数
			userAccount : userAccount,
			 userSex : userSex,
		   userEmail : userEmail,
		     userAge : userAge,
		     userPass : userPass,
		userBirthday : userBirthday
		},
		success : function(data) {//执行成功后调用的方法
				if(data[0].flag == true){
					alert("新增成功");
				}else{
					alert("新增失败");
				}		
				/*  $("#showAllMessage").slideDown("slow");//显示消息 */
			},
		error : function(err) {//执行失败后的失败信息的显示
			console.log(err);
		}
	});
}
function closeMessage(){//关闭消息
	$("#showAllMessage").hide();//隐藏消息
	query(0);
}
function back(){
	$("#pageDiv").fadeIn();
	$("#addDiv").hide();
	 //query(0);
}

;!function(){
	laydate({
	   elem: '#demo'
	})
	}();
</script>
</html>